<template>
  <view>
    <!-- 顶部导航 -->
    <fa-navbar title="商城记录" :border-bottom="false"></fa-navbar>

    <view class=" u-m-b-30 p-2">

      <!--      <u-grid :col="3" :border="none">
              <u-grid-item v-for="(item, index) in list" :key="index" :custom-style="{padding: '8rpx'}">
                <view class="item" @click="goPage('/pages/goods/detail?id=' + item.id)">
                  <view class="images">
                    <image :src="item.image" mode="aspectFill"></image>
                  </view>
                  <view class="u-m-15 name  u-flex u-row-between">
                    <text class="u-line-1">{{ item.title }}</text>
                    <view>{{item.price}}</view>
                  </view>
                </view>
              </u-grid-item>

            </u-grid>-->
      <view class="bg-white p-2 u-flex justify-between items-center list" v-for="(item, index) in list">
        <view class="flex items-center left">
          <image src="/static/image/logo.png"></image>
          <view class="left_content">
            <view class="flex items-center">
              <u-icon size="30rpx" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>
              <text class="left_title">【健身】乐享健身工作室</text>
              <u-icon name="arrow-right" size="20rpx"></u-icon>
            </view>
            <view class="left_money">1 次｜实付 ¥188</view>
            <view class="left_time">下单时间 2024-10-22 12:00</view>
          </view>
        </view>
        <view class="right">
          +19积分
        </view>
      </view>

    </view>
    <!-- 空数据 -->
    <view class="u-flex u-row-center fa-empty top-15" v-if="is_empty">
      <image src="../../static/image/collect.png" mode=""></image>
      <view class="u-tips-color">没有更多的收藏商品了~</view>
    </view>
    <!-- 加载更多 -->
    <view class="u-p-b-30" v-if="list.length">
      <u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'"/>
    </view>
    <!-- 回到顶部 -->
    <u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
                :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
    <!-- 底部导航 -->
    <fa-tabbar></fa-tabbar>
  </view>
</template>

<script>
import UGrid from "../../uview-ui/components/u-grid/u-grid.vue";
import UGridItem from "../../uview-ui/components/u-grid-item/u-grid-item.vue";

export default {
  components: {UGridItem, UGrid},
  onLoad() {
    this.collectList();
  },
  onShow() {
    if (this.isFirst && !this.vuex_token) {
      uni.$u.route({
        type: 'back'
      });
      return;
    }
    this.isFirst = true;
  },
  data() {
    return {
      isFirst: false,
      status: 'loadmore',
      has_more: false,
      scrollTop: 0,
      is_update: false,
      is_empty: false,
      page: 1,
      show: false,
      list: [],
      options: [
        {
          text: '移除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    };
  },
  methods: {
    collectList() {
      this.$api.viewGoodlist({page: this.page}).then(result => {
        this.status = 'loadmore';
        let {code, data: res, msg} = result;
        if (code == 1) {
          if (this.is_update) {
            this.list = [];
            this.is_update = false;
          }
          res.data.map(item => {
            item.show = false;
          });
          this.list = [...this.list, ...res.data];
          this.has_more = res.current_page < res.last_page;
          this.is_empty = !this.list.length;
        }
      });
    },
    click(index) {
      this.collect(this.list[index].goods_id);
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    },
    collect(id) {
      this.$api.optionCollect({goods_id: id}).then(res => {
        if (res.code) {
          this.$u.toast('取消收藏成功');
          this.is_update = true;
          this.page = 1;
          this.collectList();
        } else {
          this.$u.toast(res.msg);
        }
      });
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    if (this.has_more) {
      this.status = 'loading';
      this.page = this.page + 1;
      this.collectList();
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
.list {
  border-radius: 10rpx;

  .left {
    image {
      width: 100rpx;
      height: 100rpx;
    }
    .left_content{
      margin-left: 43rpx;
      display: flex;
      flex-flow: column wrap;
    justify-content: center;
      .left_title{
        font-size: 24rpx;
        padding-right: 16rpx;
      }
      .left_money{
        font-size: 20rpx
      }
      .left_time{

        font-size: 18rpx;
        color: #999999 ;
      }
    }
  }

  .right {
color: #999999;
    font-size: 18rpx;
  }
}
</style>
